<template>
	<view>
		<view class="main">
			<view class="main-box">
				<u--text color="#ededed" size="17" lineHeight="70" align="center" text="记账"></u--text>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
		<!-- 填写信息 -->
		<view>
			<form @submit="formSubmit">
				<view class="input">
					<view class="title">姓名：</view>
					<input :name="user.nickname" disabled :value="user.nickname" class="uni-input" name="nickname" />
				</view>
				<view class="input">
					<view class="title">标题：</view>
					<input class="uni-input" name="title" />
				</view>
				<view class="input">
					<view class="title">金额：</view>
					<input class="uni-input" name="money" />
				</view>
				<view class="radio">
					<view class="title">类型：</view>
					<radio-group name="typeId">
						<label>
							<radio value="1" /><text>收入</text>
						</label>
						<label>
							<radio value="2" /><text>支出</text>
						</label>
					</radio-group>
				</view>
				<view class="sectionBox">
					<picker name="payway" @change="objectPickerChange" :value="objectIndex" :range="payway"
						range-key="payway">
						<view class="picker">
							方式：{{ payway[objectIndex].payway }}
						</view>
					</picker>
				</view>

				<view class="input">
					<view class="title">备注：</view>
					<input class="uni-input" name="notes" />
				</view>

				<view class="photo">
					<view class="label">照片：</view>
					<view @click="chooseImg" class="ipt">
						<img class="avatar" :src="photo" />
					</view>
				</view>

				<view class="uni-btn-v">
					<button class="subtn" form-type="submit">保存</button>
				</view>
			</form>
		</view>

	</view>
</template>

<script>
import { getPayWayAllData } from '../../api/payway/payway'
import { savePay } from '../../api/pay/pay'
import { saveIncome } from '../../api/income/income'
export default {
	components: {
	},
	data() {
		return {
			objectIndex: 0, //默认索引
			payway: [],
			mode: {},
			photo: "https://img2.baidu.com/it/u=3854158804,1500513467&fm=253&fmt=auto&app=120&f=JPEG?w=575&h=500",
			param: {
				userId: null,
				nickName: "",
				title: '',
				photo: '',
				money: 0,
				typeId: null,
				typeName: '',
				paywayId: null,
				paywayName: '',
				notes: '',
				createTime: null
			},
			pay: [],
			income: [],
			user: {}
		};
	},
	created() {
		this.user = JSON.parse(uni.getStorageSync('userinfo'))
		this.load();
	},
	onShow() {
	},
	mounted() {
	},
	methods: {
		// 普通选择器(json格式数组)
		objectPickerChange(e) {
			let id = e.detail.value + 1
			this.objectIndex = e.detail.value;
			this.payway.forEach(element => {
				if (element.id == id) {
					this.mode.paywayId = element.id
					this.mode.paywayName = element.payway
				}
			});
		},
		chooseImg() {
			uni.chooseImage({
				count: 1,
				success: (res) => {
					const tempFilePaths = res.tempFilePaths;
					const tempFilePath = tempFilePaths[0];
					uni.uploadFile({
						url: 'http://localhost:8888/file/upload/img', // 替换为实际的上传接口地址
						filePath: tempFilePath,
						name: 'file',
						success: (res) => {
							this.photo = res.data
						},
						fail: (err) => {
							console.error(err);
						},
					});
				},
			});

		},

		formSubmit(e) {
			// console.log(e);
			var formdata = e.detail.value
			if (formdata.money == "" || 
				formdata.title == "" || 
				formdata.radio == "" || 
				this.mode.paywayId == undefined || 
				this.mode.paywayName == undefined) 
			{
				this.$refs.uToast.show({
					message: '请输入对应的信息',
					type: 'error'
				})
				return
			}
			this.param = {
				userId: this.user.id,
				nickName: this.user.nickname,
				title: formdata.title,
				money: formdata.money,
				typeId: formdata.typeId,
				typeName: formdata.typeId == 1 ? "收入" : "支出",
				paywayId: this.mode.paywayId,
				paywayName: this.mode.paywayName,
				notes: formdata.notes,
				createTime: this.$moment().format('YYYY-MM-DD HH:mm:ss'),
				photo: this.photo
			}
			console.log(this.param);
			if (this.param.typeId == 1) {
				saveIncome(this.param).then(res => {
					if (res.code == 200) {
						this.$refs.uToast.show({
							message: '保存成功',
							type: 'success'
						})
						// 刷新当前页面
						setTimeout(() => {
							this.$router.go(0)
						}, 500)
					}
				})
			} else if (this.param.typeId == 2) {
				savePay(this.param).then(res => {
					if (res.code == 200) {
						this.$refs.uToast.show({
							message: '保存成功',
							type: 'success'
						})
						// 刷新当前页面
						setTimeout(() => {
							this.$router.go(0)
						}, 500)
					}
				})
			}
		},

		open(e) {
			console.log('open', e)
		},
		close(e) {
			console.log('close', e)
		},
		change(e) {
			console.log('change', e)
		},
		load() {
			getPayWayAllData().then(res => {
				this.payway = res.data
				console.log(this.payway);
			})
		},
	}
};
</script>

<style lang="scss" scoped>
.sectionBox {
	padding: 10px 0;
	margin: 0 10px;
	width: 80%;

	.picker {
		font-size: 17px;
	}
}

.radio {
	display: flex;
	margin: 5px 10px;

	radio-group {
		label {
			margin: 0 10px;
		}
	}
}

.photo {
	margin: 5px 10px;
	display: flex;
	align-items: center;
	justify-content: left;

	.avatar {
		width: 210rpx;
		height: 238rpx;

	}

	.ipt {
		display: flex;
		align-items: center;
		justify-items: center;

	}
}


.input {
	display: flex;
	margin: 5px 10px;
	padding: 10px 0;
	align-items: center;

	input {
		border: 1px solid rgb(181, 180, 180);
		width: 80%;
		height: 40px;
	}
}

.subtn {
	width: 200px;
	color: #fff;
	background-color: #1dc7e5;
	margin: 30px auto;
}

page,
body {
	background-color: #fff;
}

.main {
	background-color: #FF9800;
}

.main-box {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.main-box u--text {
	width: 20px;
}

.info {

	margin: 15px 0;
}

.info-item {}
</style>